<script setup lang="ts">
// 定义组件名
defineOptions({ name: "CountryProfitRankingChart" });

import { useDark, useECharts } from "@pureadmin/utils";
import { ref, computed, watch, nextTick, type PropType } from "vue";
import { generatePalette } from "@/plugins/echarts";

// TS 类型定义
interface CountryRank {
  country: string;
  cost: number;
  rank: number;
  profit: number;
  sales: number;
  tasks: number;
}
// 组件接收的数据为数组，每个对象为一个国家的统计数据
const props = defineProps({
  data: {
    type: Array as PropType<CountryRank[]>,
    default: () => []
  }
});

// ECharts 初始化
const chartRef = ref<HTMLDivElement>();
const { isDark } = useDark();
const themeName = "lowSaturationFancy";
const { setOptions } = useECharts(chartRef, { theme: themeName });

// 对数据按 rank 排序
const sorted = computed(() => [...props.data].sort((a, b) => a.rank - b.rank));
const categories = computed(() =>
  sorted.value.map(item => `${item.rank}. ${item.country}`)
);
const profits = computed(() => sorted.value.map(item => item.profit));
const costs = computed(() => sorted.value.map(item => item.cost));
const tasks = computed(() => sorted.value.map(item => item.tasks));

watch(
  () => props.data,
  async () => {
    await nextTick();

    const count = sorted.value.length;
    const colors = generatePalette(count);

    // 默认：水平柱状图
    const barOption = {
      color: colors,
      tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
      grid: {
        left: "100px",
        right: "20px",
        top: "20px",
        bottom: "20px",
        containLabel: true
      },
      xAxis: {
        type: "value",
        axisLabel: { color: isDark.value ? "#fff" : "#666" }
      },
      yAxis: {
        type: "category",
        data: categories.value,
        inverse: true,
        axisLabel: { color: isDark.value ? "#fff" : "#666" }
      },
      series: [
        {
          name: "总收益",
          type: "bar",
          barWidth: 20,
          itemStyle: {
            borderRadius: [0, 10, 10, 0],
            color: (params: any) => colors[params.dataIndex]
          },
          label: { show: true, position: "insideRight", formatter: "{c}" },
          data: profits.value
        }
      ]
    };

    // 可选：气泡图 (Bubble Chart) 展示 profit vs cost, 大小映射 tasks
    const bubbleOption = {
      color: colors,
      tooltip: {
        trigger: "item",
        formatter: (params: any) => {
          const { data } = params;
          return `${data.name}<br/>Profit: ${data.value[1]}<br/>Cost: ${data.value[0]}<br/>Tasks: ${data.value[2]}`;
        }
      },
      xAxis: {
        name: "成本",
        type: "value",
        axisLabel: { color: isDark.value ? "#fff" : "#666" }
      },
      yAxis: {
        name: "收益",
        type: "value",
        axisLabel: { color: isDark.value ? "#fff" : "#666" }
      },
      series: [
        {
          name: "国家",
          type: "scatter",
          symbolSize: (data: any) => data[2] * 3,
          label: { show: true, formatter: "{@[3]}", position: "right" },
          data: sorted.value.map(item => [
            item.cost,
            item.profit,
            item.tasks,
            item.country
          ])
        }
      ]
    };

    // 默认渲染柱状图，若需气泡图可切换：
    setOptions(barOption);
    // setOptions(bubbleOption);
  },
  { immediate: true, deep: true }
);
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 365px" />
</template>
